<template>
  <a-row>
    <a-row  style='margin-bottom: 50px'>
      <!-- 部门信息 -->
        <a-col  :md='24'  :sm='24'  :xl='12'  :lg='12'>
          <h3  class='fontWeight'>权限管理-内部员工</h3>
          <a-divider />
          <a-tree  v-if='treeData.length>0'  :defaultExpandedKeys="[4]"
              :treeData="treeData"   
            >
              <template  slot="custom"  slot-scope="item" @mouseenter='mouseenter($event)' @mouseleave='mouseleave($event)'  >
                  <span  >{{ item.name }}</span>
                  <a-tooltip    title="添加" >
                      <a-icon   type="plus-circle"    class="btn_type"   @click="()=> append(item,1)"/>
                  </a-tooltip  >
                  <a-tooltip    title='编辑' >
                      <a-icon   type="edit"         v-if='item.parentId!="0"'  class="btn_type  "  style='right:50px'   @click="()=> edit(item,1)"/>
                  </a-tooltip>
                  <a-popconfirm title="确认删除该部门?"   @confirm="confirmDel(item.code,1)"  okText="确认" cancelText="取消">
                      <a-icon   type="delete"       v-if='item.parentId!="0"'  class="btn_type  "   style='right:30px'  />
                  </a-popconfirm>
              </template>
          </a-tree>
        </a-col>  
    </a-row>
    <a-row>
        <a-col  :md='24'  :sm='24'  :xl='12'  :lg='12'>
          <h3  class='fontWeight'>权限管理-外部客户</h3>
          <a-divider />
          <a-tree  v-if='treeData2.length>0'  :defaultExpandedKeys="[4]"
              :treeData="treeData2" 
            >
              <template  slot="custom"  slot-scope="item" @mouseenter='mouseenter($event)' @mouseleave='mouseleave($event)'  >
                  <span  >{{ item.name }}</span>
                  <a-tooltip    title="添加" >
                      <a-icon   type="plus-circle"    class="btn_type"   @click="()=> append(item,2)"/>
                  </a-tooltip  >
                  <a-tooltip    title='编辑' >
                      <a-icon   type="edit"           class="btn_type  "  style='right:50px'   @click="()=> edit(item,2)"/>
                  </a-tooltip>
                  <a-popconfirm title="确认删除该部门?"   @confirm="confirmDel(item.code,2)"  okText="确认" cancelText="取消">
                      <a-icon   type="delete"       v-if='item.parentId!="0"'  class="btn_type  "   style='right:30px'  />
                  </a-popconfirm>
              </template>
          </a-tree>
        </a-col>
    </a-row>
    <menuForm  ref='menuModal' :visible='showModal' :parentMenu='currentMenu'  v-on:handleCancel='showModal=false'  v-on:handleOk='handleOk()'></menuForm>
  </a-row>
</template>

<script>
  import   {  menuList,delMenu,menuListCustomer }  from  '@/api/system/jurisdiction'

import  menuForm  from  '@/components/system/jurisdiction/index'
export default {
  name: 'jurisdiction',
  data () {
    return {
        search:{
            pageNo:1,
            pageSize:1000,
        },

        treeData:[],
        treeData2:[],
        initial:[],//初始请求

        currentMenu:[],//当前的menu菜单
        parentMenu:[],//去掉非menu的data
        parentMenuCus:[],//

        showModal:false,
    }
  },
  created(){
      this.pageInit()
  },
  methods:{
      pageInit(){  

        let menu1 = new Promise((resolve,reject)=>{
            menuList({pageSize:200}).then((res)=>{
                resolve(res.data.dataList)
            })
        })
        let menu2 = new Promise((resolve,reject)=>{
            menuListCustomer({pageSize:200}).then((res)=>{
              resolve(res.data.dataList)
            })
        })
        Promise.all([menu1,menu2]).then((res)=>{  
          this.parentMenu = res[0].filter(item => item.isMenu == "1" ) 
          this.treeData =  this.formTree(res[0])  

          this.parentMenuCus = res[1].filter(item => item.isMenu == "1" ) 
          this.treeData2 = this.formTree(res[1])   
        }).catch((error)=>{

        })

      },
      /*功能函数*/
      /*------部门操作------*/
        /*add*/
      append(item,active){
        this.currentMenu = active == 1? this.parentMenu : this.parentMenuCus
        this.$refs.menuModal.$emit('openDialog' , item.id,active )
        this.showModal = true
      },

      edit(item,active){
        this.currentMenu = active == 1? this.parentMenu : this.parentMenuCus
        this.$refs.menuModal.$emit('editDialog' , item.code ,active)
        this.showModal = true
      },
      confirmDel (code,active) {
        let url
        if(active == 1){
          url='/sys/menu/delete_menu'
        }
        if(active == 2){
          url='/sys/client_menu/delete_client_menu' //删除 客户用户菜单
        }
        delMenu(url,code).then((res)=>{
            this.$message.info(res.data.msg)
            this.pageInit()
        })
      },

      handleOk(){
        this.showModal=false
        this.pageInit()
      },

      /*工具函数*/
    //data 转换为 树类型
    formTree(List){
        let data = [];

        List.forEach((item)=>{
          if( item.parentId == '0'){
              data.push({
                key:item.id,

                id:item.id,
                name:item.name,
                code:item.code,
                parentId:item.parentId,
                isMenu:item.isMenu,/*加入菜单 判断是否显示新增*/
                scopedSlots: { title: 'custom' },
              })
          }
        })
        // console.log(data)
        return this.formNextTreeTest(List,data)
    },
    //二级及以上 树类型
    formNextTreeTest(List,data){
          data.forEach((item,index)=>{
          let child= []
          List.forEach((it)=>{
              if(item.id == it.parentId){
                  child.push({
                    key:it.id,

                    id:it.id,
                    name:it.name,
                    code:it.code,
                    parentId:it.parentId,
                    isMenu:it.isMenu,
                    scopedSlots: { title: 'custom' },
                  })
              }
            })
            item.children=child
            if(child.length>0){
                this.formNextTreeTest(List,child) //递归
            }
          })
          // this.treeData = data
          return data
          // console.log(this.treeData)
    },
     
  },
  computed:{
    
  },
  components:{
    menuForm
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn_type{float: right;position: absolute;right: 70px;margin-top: 5px;}
</style>
